<template>
    <div class="mainClass">
        <div style="height:50px;text-align:center;">
            <div style="font-size: 20px;padding-top: 10px;display: block;float: left;font-weight: bold;">
                
            </div>
        </div>
        <form style="margin:20px 10px 0px 10px; display: flex;flex-direction: column;">
            <div style="text-align: center;margin-bottom: 30px;">
                <img style="width:110px;" src="~#/img/login-logo.png" alt="" />
            </div>
            <input type="text" class="inputClass" v-model="username" placeholder="用户名" autofocus>
            <input type="password" class="inputClass" v-model="password" placeholder="密码">
            <a class="inputClass aClass" href="javascript:;" @click="login">
                <div class="percent" :style="percentStyle">
                    <span class="submitCheckOut" :style="submitCheckOutStyle" v-html="submitCheckOut"></span>
                </div>
            </a>
        </form>
    </div>
</template>
<script>
import C from '@/common/common.js'
// import config from '#/package.json'
import { ipcRenderer, remote } from 'electron'

export default {
  name: 'index',
  data () {
    return {
      username: '',
      password: '',
      //            version: '',
      submitCheckOut: '准备检查更新！',
      submitCheckOutStyle: {

      },
      percentStyle: {
        width: '0%'
      },
      canSubmit: false
    }
  },
  methods: {
    async login () {
      if (!this.canSubmit) return false
      if (this.username == '') {
        C.error('请填写用户名')
        return false
      }
      if (this.password == '') {
        C.error('请填写密码')
        return false
      }
      const machine = require('node-machine-id')
      let machineid = machine.machineIdSync()
      this.canSubmit = false
      this.submitCheckOut = '<i class="el-icon-loading"></i>'
      let res = await C.ajax('/login/public/newsignin', { username: this.username, password: this.password, machineid: machineid }, 'post')
      this.submitCheckOut = '确  定'
      this.canSubmit = true
      // 存储token
      if (res) {
        C.setLocalStorage('usertoken', res.data.token)
        C.setLocalStorage('permission', res.data.permi.gradepermission)
        if (res.data.floor == 1) {
          let win = this.$Win.createWin({
            router: '/shop',
            width: 1600,
            height: 900
          })
          win.show()
        } else {
          // C.openBrowserWindow('html/organization/index.html', {}, {width: 1600, height: 900})
          let win = this.$Win.createWin({
            router: '/organization',
            width: 1600,
            height: 900
          })
          win.show()
        }
        C.closewin()
      }
    },
    close () {
      C.closeBrowserWindow()
    },
    async checkUpdatesMessage () {
      // 接收更新消息
      ipcRenderer.on('_checkUpdatesMessage', (e, arg) => {
        this.submitCheckOut = arg.msg
        this.percentStyle.width = arg.percent
        if (arg.success) {
          this.submitCheckOut = '确  定'
          this.submitCheckOutStyle = {
            color: '#fff',
            fontSize: '30px',
            fontWeight: '900'
          }
          this.canSubmit = true
          if (arg.isreStart) {
            alert('更新完毕，点击确定重启应用！')
            remote.app.relaunch()
            remote.app.exit(0)
          }
        }
      })
    },
    onkeyUp () {
      window.onkeyup = e => {
        if (e.which == 13) this.login()
      }
    }
  },
  mounted: function () {
    //        this.version = config.smallVersion
    localStorage.clear()

    // 放入队列最后执行
    setTimeout(function () {
      ipcRenderer.send('_checkUpdates')
    })
    this.checkUpdatesMessage()

    // 发送主窗口（--兼容图标）
    // ipcRenderer.send('_changeMainWindow', remote.getCurrentWindow().id)

    this.onkeyUp()
  }
}
</script>
<style>
#headTitle{
    display: inline-block;
}
#container{
    background-color: rgba(34, 72, 78, 0.49);
}
.mainClass {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.inputClass {
  height: 30px;
  border: none;
  border-radius: 3px;
  padding: 5px 15px;
  margin-bottom: 25px;
  outline: none;
}
.aClass {
  border: none;
  background: rgb(234, 234, 236);
  padding: 0px;
  position: relative;
  text-decoration: none;
  height: 40px;
  text-align: center;
}
*:focus {
  outline: none !important;
}
a :hover {
  color: #000;
}
.submitCheckOut {
  width: 343px;
  display: block;
  font-size: 12px;
  line-height: 39px;
  color: rgb(228, 4, 118);
}
.submitCheckOut :hover {
  color: #fff;
}
.percent {
  background: #4fd4a2;
  border-radius: 3px;
  width: 0%;
  position: absolute;
  height: 40px;
}
</style>